<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查询</title>
	</head>
	<body>
		<div id="app">
			<h3>查询</h3>
			<label>姓名:</label>
			<input type="text" v-model="paramName" />
			<button @click="query()">查询</button>
			<hr />
			<h3>用户列表</h3>
			<button @click="gotoadd()">增加</button>
			<table border="1">
				<thead>
					<tr>
						<th style="width: 100px;">序号</th>
						<th style="width: 100px;">id</th>
						<th style="width: 100px;">姓名</th>
						<th style="width: 100px;">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item, index) in list">
						<td>{{index + 1 }}</td>
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>
							<button @click="gotoupdate(item.id)">修改</button>
							<a href="">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
			<span v-if="isshow">暂时没有数据</span>
		</div>
		<script src="js/vue.js"></script>
		<script src="js/axios.js"></script>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					paramName: "",
					list: [],
					isshow: true
				},
				methods: {
					query: function() {
						console.log(this.paramName);
						axios({
							headers: {'content-type': 'application/x-www-form-urlencoded'},
							method: "post",
							url: "http://localhost:8888/simpleweb/userquery",
							data : "name=" + this.paramName
						}).then((res) => {
							console.log(res.data);
							if(res.data.length > 0) {
								this.list = res.data;
								this.isshow = false;
							} else {
								this.list = [];
								this.isshow = true;
							}
							
						}).catch((error )=> {
							console.log(error);
						});
					}
					,
					gotoadd: function() {
						location.href = "adddemo.html";
					},
					gotoupdate: function(id) {
						location.href = "updatedemo.html?name=" + id;
					}
				}
			});
		</script>
	</body>
</html>